<template>
    <div class="supplier-detail">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>供应商详情: {{ supplier?.name }}</span>
                    <el-button type="primary" @click="goBack" size="small">返回</el-button>
                </div>
            </template>

            <el-descriptions column="2" border>
                <el-descriptions-item label="供应商名称">{{ supplier?.name }}</el-descriptions-item>
                <el-descriptions-item label="供应商编码">{{ supplier?.code }}</el-descriptions-item>
                <el-descriptions-item label="联系人">{{ supplier?.contact_person }}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ supplier?.contact_phone }}</el-descriptions-item>
                <el-descriptions-item label="电子邮箱">{{ supplier?.email }}</el-descriptions-item>
                <el-descriptions-item label="地址">{{ supplier?.address }}</el-descriptions-item>
                <el-descriptions-item label="信用等级">{{ supplier?.credit_rating }}</el-descriptions-item>
                <el-descriptions-item label="状态">
                    <el-tag :type="supplier?.status ? 'success' : 'danger'">
                        {{ supplier?.status ? '启用' : '禁用' }}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="经营范围" :span="2">{{ supplier?.business_scope }}</el-descriptions-item>
                <el-descriptions-item label="备注" :span="2">{{ supplier?.remarks }}</el-descriptions-item>
            </el-descriptions>
        </el-card>

        <el-tabs v-model="activeTab" class="mt-20">
            <el-tab-pane label="供应商产品" name="products">
                <supplier-products :supplier_id="supplier_id"></supplier-products>
            </el-tab-pane>
            <el-tab-pane label="供应商评估" name="evaluations">
                <supplier-evaluations :supplier_id="supplier_id"></supplier-evaluations>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, reactive, toRefs } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import * as api from './api';
import SupplierProducts from '../components/SupplierProducts.vue';
import SupplierEvaluations from '../components/SupplierEvaluations.vue';

export default defineComponent({
    name: 'SupplierDetail',
    components: {
        SupplierProducts,
        SupplierEvaluations
    },
    setup() {
        const route = useRoute();
        const router = useRouter();
        const supplier_id = ref(route.params.id as string);
        const supplier = ref<any>(null);
        const activeTab = ref('products');

        const loadSupplierDetails = async () => {
            try {
                const response = await api.GetObj(supplier_id.value);
                supplier.value = response.data;
            } catch (error) {
                ElMessage.error('获取供应商详情失败');
                console.error(error);
            }
        };

        const goBack = () => {
            router.back();
        };

        onMounted(() => {
            loadSupplierDetails();
        });

        return {
            supplier_id,
            supplier,
            activeTab,
            goBack
        };
    }
});
</script>

<style lang="scss" scoped>
.supplier-detail {
    padding: 20px;

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mt-20 {
        margin-top: 20px;
    }
}
</style> 